<template>
	<view class="single-select-container" v-show="isShowSinglePop">
		<view class="full-mask-screen" @click.stop="closePop"></view>
		<view class="select-content">
			<view class="close-btn" @click.stop="closePop"><text>×</text></view>
			<view class="s-content--top scroll-y">
				<view class="pro-pic" v-if="product.images">
					<image class="pro-pic_img" mode="aspectFill" :src="product.images.middle" alt="" />
				</view>
				<view class="pro-name">{{product.name}}</view>
				<view class="pro-tags" v-if="product.features">{{product.features}}</view>
				<view class="pro-desc">{{product.shortDesc}}</view>

				<template v-for="oItem in relevanceProducts">
					<template v-if="oItem.options.length && oItem.comboInfo.attr === 2">
						<view class="add-dosage">
							<view class="dosage-title">选择规格（单选）</view>
							<view class="dosage-pro">
								<goods-combo :options="oItem.options" :comboInfo="oItem.comboInfo" :throughAllPid="oItem.throughAllPid"
								 :mutexIds="relevanceMutexIds['0'] || []" :imgHeight="124" @handleMutexEvent="handleRelevanceMutexEvent"
								 @handleOptionSelects="handleOptionSelects">
								</goods-combo>
							</view>
						</view>
					</template>

					<template v-if="oItem.options.length && oItem.comboInfo.attr === 1">
						<view class="add-dosage">
							<view class="dosage-title">加量升级更优惠（可选 | 多选）</view>
							<view class="dosage-pro">
								<goods-combo :options="oItem.options" :comboInfo="oItem.comboInfo" :throughAllPid="oItem.throughAllPid"
								 :mutexIds="relevanceMutexIds['0'] || []" :imgHeight="124" @handleMutexEvent="handleRelevanceMutexEvent"
								 @handleOptionSelects="handleOptionSelects">
								</goods-combo>
							</view>
						</view>
					</template>
				</template>

				<template v-if="shuxingConfig.name">
					<view class="add-dosage">
						<view class="dosage-title">选择{{shuxingConfig.name}}</view>
						<view class="dosage-pro">
							<template v-for="sx in shuxingConfig.list">
								<view class="sx-item">
									<view class="sx-item--block" @click="onChooseSx(sx)">
										<view class="txt">{{sx}}</view>
										<view :class="shuxingValue===sx?'l-radio active':'l-radio'">
											<text class="iconfont icon-duihuanchenggongtubiao"></text>
										</view>
									</view>
								</view>
							</template>
						</view>
					</view>
				</template>

			</view>
			<view class="s-content--bottom">
				<view class="price"><text class="symbol">￥</text>{{couponId?useCouponTotalPrice:totalPrice}}</view>
				<stepper :isShowZero="true" :max="couponId?1:product.max" :confirm="true" :itemNum="num" :fromOrigin="1" @handleAdd="handleAdd"
				 @handleMinus="handleMinus"></stepper>
				<button class="l-btn btn-primary join-btn" hover-class="btn-hover" @click="onJoinCart">加入购物车</button>
			</view>
		</view>
	</view>
</template>

<script>
	import data from './single-select.js';
	export default data;
</script>

<style lang="less" scoped>
	@import '~@/common/styles/common.less';
	@import './single-select.less';
</style>
